<%--
  Created by IntelliJ IDEA.
  User: HJX
  Date: 2021/10/18
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>订单管理界面</title>
    <script src="/super/js/jquery-1.11.0.js" type="text/javascript"></script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--引入阿里巴图标库-->
    <link rel="stylesheet" href="/super/font/fong-style/iconfont.css">
<%--    <link rel="stylesheet" href="/super/css/style.css" />--%>
    <style type="text/css">
        html,
        body {
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        #box {
            height: 100%;
            width: 100%;
            background-color: #4287c2;
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }

        #top {
            height: 15%;
            width: 100%;
            background-color: azure;
        }

        #bottom {
            height: 85%;
            width: 100%;
            background-color: aquamarine;
        }

        #bottom_navigator {
            height: 100%;
            width: 13%;
            background-color: chartreuse;
            float: left;
        }

        #bottom_view {
            height: 100%;
            width: 87%;
            float: left;
            background-color: blanchedalmond;
        }

        .icon-gouwuche {
            font-size: 50px;
            display: inline-block;
            margin-top: -8px;
        }

        .buy_car {
            margin-left: 6%;
        }

        .buy_car span {
            display: block;
            font-size: 20px;
            margin-left: 100px;
            margin-top: -48px;
            color: #ffffff;
            /*后面3个属性:左 上 模糊*/
            text-shadow: black 4px 4px 5px;
        }

        .top_top {
            height: 65%;
            width: 100%;
            background-color: #5b96d7;
        }

        .top_bottom {
            height: 35%;
            width: 100%;
            background-color: #f5f5f5;
            border-bottom: 1px solid #5f9ea0;
        }

        .top_right {
            margin-left: 80%;
            margin-top: -30px;
        }

        .top_right span {
            font-size: 15px;
            color: white;
        }

        .top_right a {
            display: inline-block;
            background-color: rgb(167, 221, 105);
            font-size: 15px;
            color: white;
            cursor: pointer;
            width: 60px;
            height: 30px;
            border-radius: 3px;
            text-align: center;
            text-decoration: none;
            padding-top: 4px;
        }

        .navigator_button {
            margin-top: -20px;
            height: 95%;
            width: 100%;
            background-color: #f5f5f5;
        }

        .navigator_button_ul li {
            list-style: none;
            font-size: 25px;
            color: #e4bdc2;
            margin-left: 30px;
            margin-top: 20px;
        }

        .navigator_button_ul li a {
            text-decoration: none;
            cursor: pointer;
            font-size: 20px;
        }

        .navigator_button_ul li a i {
            font-size: 20px;
        }

        table th {
            text-align: center;
            background-color: #f6f7f9;
            border-color: darkgray;
            height: 40px;
        }

        .icon-tianjia {
            font-size: 25px;
        }
        table td{
            height: 40px;
            text-align: center;
            background-color: #ffffff;
        }
        .icon-xiugai{
            font-size: 25px;
            color: dodgerblue;
        }
        .icon-shanchu{
            font-size: 25px;
            color: dodgerblue;
        }
        .navigator_button_ul li a span{
            font-size: 18px;
        }
    </style>
</head>
<body>
<div id="box">
    <!--顶部-->
    <div id="top">
        <!--顶部-->
        <div class="top_top">
            <!--购物车-->
            <div class="buy_car">
                <i class="iconfont icon-gouwuche"></i>
                <span>超市订单管理系统</span>
            </div>
            <div class="top_right">
                <span>下午好，欢迎你！</span>
                <a href="/super/logout">退出</a>
            </div>
        </div>
        <div class="top_bottom" style="font-size: 20px;">
            <div class="top_bottom_time" style="float: left;margin-top: 4px;">
<%--                动态显示时间的区域--%>
                <span style="margin-left: 20px;font-size: 15px" id="dynamicTime"></span>
            </div>
<%--            显示在线的用户--%>
            <div class="username" style="float: left;margin-top: 4px;margin-left: 50px;font-size: 15px">
                <span>当前用户:</span><span style="font-size: 15px">${sessionScope['user']}</span>
            </div>
            <div class="top_bottom_notice" style="margin-left: 70%;font-size: 15px">
                <span style="margin-top: 5px;display: inline-block;">Tip:${applicationScope['notice']}</span>
            </div>
        </div>

    </div>
    <!--底部-->
    <div id="bottom">
        <!--坐标导航栏-->
        <div id="bottom_navigator">
            <!--标题-->
            <div class="navigator_title">
                <p style="font-size: 20px;color: white;background-color: cornflowerblue;text-align: center;border-radius: 3px;">功能列表</p>
            </div>
            <!--导航菜单-->
            <div class="navigator_button">
                <ul class="navigator_button_ul">
                    <li>
                        <a><i class="iconfont icon-dingdanguanli"></i>
                            <span>订单管理</span></a>
                    </li>
                    <li>
                        <a>
                            <i class="iconfont icon-gongyingshangguanli"></i>
                            <span>供应商管理</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <i class="iconfont icon-yonghuguanli"></i>
                            <span>用户管理</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <i class="iconfont icon-xiugai"></i>
                            <span>密码修改</span>
                        </a>
                    </li>
                    <li>
                        <a href="/super/logout"><i class="iconfont icon-tuichuxitong"></i>
                            <span>退出系统</span></a>
                    </li>
                </ul>
            </div>
        </div>
        <!--右边展示区域-->
        <div id="bottom_view" style="background-color: #5b96d7;">
            <!--展示用户现在所在的位置-->
            <div id="bottom_view_position" style="height: 5%;width: 100%;background-color: #f5f5f5;font-size: 20px;">
						<span style="margin-left: 30px;font-size: 15px">
							你现在所在位置是:<span></span>
						</span>
                <!--下面为可变区域了，需要引入对应的页面 最终合并为一个页面-->
                <%@ include file="managePage/orderPage.jsp"%>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">

    updateTime()
    function updateTime(){
        var time=""
        setInterval(function (){
            var myDate = new Date;
            var year = myDate.getFullYear(); //获取当前年
            var mon = myDate.getMonth() + 1; //获取当前月
            var date = myDate.getDate(); //获取当前日
            var h = myDate.getHours();//获取当前小时数(0-23)
            var m = myDate.getMinutes();//获取当前分钟数(0-59)
            var s = myDate.getSeconds();//获取当前秒
            var week = myDate.getDay();//获取当前星期
            var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            //星期几
            var week=weeks[week]
            time=year+'-'+mon+'-'+date+" "+h+':'+m+':'+s+" "+week;
            $('#dynamicTime').text(time)

        },1000)
    }
</script>
</body>
</html>
